// stylelint-disable color-named, max-nesting-depth
// named colors are used as map-key
// nested parent select sholudn't trigger max-nesting-depth

.bui {
  &-link-btn {
    color: $color-link-button-fg;

    &:hover {
      color: lighten($color-link-button-fg, 20%);
    }
  }

  // button colors
  &-btn {
    $colors:
      (
      green:$color-turquoise,
        orange: $color-ecstasy,
        yellow: $color-sunglow,
        red: $color-persimmon,
      );

    @each $key in map-keys($colors) {
      &--#{$key} {
        $color: map-get($colors, $key);

        border-color: $color;
        background: $color;

        &:hover {
          border-color: lighten($color, 10%);
          background: lighten($color, 10%);
        }
      }
    }
  }
}

.bui-btn--green {
  color: #fff;
  &:hover {
    color: #fff;
  }
}

// Reset Button width
.bui-btn,
.ant-btn {
  min-width: 80px;
}
.ant-btn:not(:last-child){
  margin-right: 12px;
}

.ant-btn-danger {
    color: #fff;
    background-color: $color-ecstasy;
    border-color: $color-ecstasy;
    &:hover{
      background-color: $color-persimmon;
      border-color: $color-persimmon;
      color: #fff;
    }
    & .anticon{
      color: #fff;
    }
}